<template>
  <view class="repair-detail-container">
    <!-- 顶部标签页 -->
    <view class="tab-header">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <view :id="'tab-content-' + index" class="tab-content">
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <swiper
      class="swiper-content"
      :current="currentTab"
      @change="handleSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
      :duration="300"
      :circular="false"
      :skip-hidden-item-layout="true"
    >
      <!-- 基本信息 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-content" refresher-enabled :refresher-triggered="false" @refresherrefresh="onRefresh">
          <view class="basic-info">
            <view class="info-item">
              <text class="label">报修单号</text>
              <text class="value">{{ detail.orderNo }}</text>
            </view>
            <view class="info-item">
              <text class="label">提单时间</text>
              <text class="value">{{ detail.submitTime }}</text>
            </view>
            <view class="info-item">
              <text class="label">报修单位</text>
              <text class="value">{{ detail.station }}</text>
            </view>
            <view class="info-item">
              <text class="label">设备名称</text>
              <text class="value">{{ detail.deviceName }}</text>
            </view>
            <view class="info-item">
              <text class="label">故障部件</text>
              <text class="value">{{ detail.faultPart }}</text>
            </view>
            <view class="info-item">
              <text class="label">紧急程度</text>
              <text class="value urgent">{{ detail.urgencyLevel }}</text>
            </view>
            <view class="info-item">
              <text class="label">故障描述</text>
              <text class="value">{{ detail.faultDesc }}</text>
            </view>
            <view class="info-item">
              <text class="label">故障日期</text>
              <text class="value">{{ detail.faultDate }}</text>
            </view>
            <view class="info-item">
              <text class="label">报修人</text>
              <text class="value">{{ detail.reporter }}</text>
            </view>
            <view class="info-item">
              <text class="label">报修人手机号</text>
              <text class="value">{{ detail.reporterPhone }}</text>
            </view>
            
            <!-- 故障照片 -->
            <view class="fault-images">
              <text class="label">故障照片</text>
              <view class="image-list">
                <view 
                  v-for="(img, idx) in detail.faultImages" 
                  :key="idx"
                  class="image-item"
                  :class="'bg-random-' + ((idx % 5) + 1)"
                >
                  <image :src="img" mode="aspectFill"></image>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 维修详情 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-content" refresher-enabled :refresher-triggered="false" @refresherrefresh="onRefresh">
          <view class="maintenance-info">
            <view class="info-item">
              <text class="label">工单类型</text>
              <text class="value">维修</text>
            </view>
            <view class="info-item">
              <text class="label">实际故障部件</text>
              <text class="value">加油枪（13/16" AILE红色）</text>
            </view>
            <view class="info-item">
              <text class="label">故障设备号</text>
              <text class="value">C1470002-07</text>
            </view>
            <view class="info-item">
              <text class="label">故障原因</text>
              <text class="value">95号汽油14号枪不自封</text>
            </view>
            <view class="info-item">
              <text class="label">维修措施</text>
              <text class="value">更换油气回收枪</text>
            </view>
            <view class="info-item">
              <text class="label">保内/保外</text>
              <text class="value">保外</text>
            </view>
            <view class="info-item">
              <text class="label">维修服务商</text>
              <text class="value">北京凯瑞嘉禾科技有限责任公司</text>
            </view>
            <view class="info-item">
              <text class="label">维修员</text>
              <text class="value">张伟</text>
            </view>

            <!-- 维修照片 -->
            <view class="maintenance-images">
              <text class="label">维修照片</text>
              <view class="image-list">
                <view 
                  v-for="(img, idx) in maintenanceImages" 
                  :key="idx"
                  class="image-item"
                  :class="'bg-random-' + ((idx % 5) + 1)"
                >
                  <image :src="img" mode="aspectFill"></image>
                </view>
              </view>
            </view>

            <!-- 费用明细 -->
            <view class="cost-details">
              <text class="section-title">费用明细</text>
              <view class="cost-list">
                <view class="cost-item">
                  <text class="cost-name">CPU主板/TL s2</text>
                  <text class="cost-value">¥ 4300</text>
                </view>
                <view class="cost-item">
                  <text class="cost-name">上门费</text>
                  <text class="cost-value">¥ 200</text>
                </view>
                <view class="cost-item total">
                  <text class="cost-name">合计</text>
                  <text class="cost-value">¥ 4500</text>
                </view>
              </view>
            </view>

            <!-- 验收签字 -->
            <view class="signature">
              <text class="section-title">验收签字</text>
              <view class="signature-box" :class="'bg-random-' + ((Math.floor(Math.random() * 5) + 1))">
                <image src="/static/placeholder.png" mode="aspectFit"></image>
              </view>
            </view>

            <!-- 服务评价 -->
            <view class="service-rating">
              <text class="section-title">服务评价</text>
              <view class="rating-stars">
                <view 
                  v-for="i in 5" 
                  :key="i"
                  class="star-icon-wrapper"
                  :class="'bg-random-' + ((i % 5) + 1)"
                >
                  <image 
                    class="star-icon"
                    :src="i <= rating ? '/static/star-active.png' : '/static/star.png'"
                    mode="aspectFit"
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 维修员位置 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-content" refresher-enabled :refresher-triggered="false" @refresherrefresh="onRefresh">
          <view class="location-info">
            <!-- 地图区域 -->
            <view class="map-container">
              <map
                class="map"
                :latitude="39.92"
                :longitude="116.46"
                :markers="markers"
                scale="14"
              ></map>
              <!-- 预计到达时间 -->
              <view class="eta-info">
                <view class="eta-avatar" :class="'bg-random-' + ((Math.floor(Math.random() * 5) + 1))">
                  <image src="/static/repair-person.png" mode="aspectFill"></image>
                </view>
                <text class="eta-text">预计1min到站</text>
              </view>
            </view>

            <!-- 维修员信息卡片 -->
            <view class="repair-person-card">
              <view class="person-avatar" :class="'bg-random-' + ((Math.floor(Math.random() * 5) + 1))">
                <image src="/static/repair-person.png" mode="aspectFill"></image>
              </view>
              <view class="person-info">
                <text class="person-name">张 伟</text>
                <text class="company-name">北京凯瑞嘉禾科技有限责任公司</text>
              </view>
              <view class="contact-btn" :class="'bg-random-' + ((Math.floor(Math.random() * 5) + 1))" @click="handleCall">
                <image src="/static/phone-blue.png" mode="aspectFit"></image>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>

      <!-- 过程信息 -->
      <swiper-item>
        <scroll-view scroll-y class="scroll-content" refresher-enabled :refresher-triggered="false" @refresherrefresh="onRefresh">
          <view class="process-info">
            <!-- 服务进度 -->
            <view class="service-progress">
              <text class="section-title">服务进度</text>
              <view class="progress-steps">
                <view class="step-item" :class="{ active: true }">
                  <image class="step-icon" src="/static/icon-submit.png" mode="aspectFit"></image>
                  <text class="step-text">预约报修</text>
                </view>
                <view class="step-line"></view>
                <view class="step-item" :class="{ active: true }">
                  <image class="step-icon" src="/static/icon-assign.png" mode="aspectFit"></image>
                  <text class="step-text">派单维修员</text>
                </view>
                <view class="step-line"></view>
                <view class="step-item" :class="{ active: true }">
                  <image class="step-icon" src="/static/icon-repair.png" mode="aspectFit"></image>
                  <text class="step-text">上门维修</text>
                </view>
                <view class="step-line"></view>
                <view class="step-item" :class="{ active: true }">
                  <image class="step-icon" src="/static/icon-check.png" mode="aspectFit"></image>
                  <text class="step-text">验收完成</text>
                </view>
                <view class="step-line"></view>
                <view class="step-item">
                  <image class="step-icon" src="/static/icon-rate.png" mode="aspectFit"></image>
                  <text class="step-text">服务评价</text>
                </view>
              </view>
            </view>

            <!-- 维修过程 -->
            <view class="repair-process">
              <text class="section-title">维修过程</text>
              <view class="timeline">
                <view class="timeline-item" v-for="(item, index) in processTimeline" :key="index">
                  <view class="time-info">
                    <text class="date">{{ item.date }}</text>
                    <text class="time">{{ item.time }}</text>
                  </view>
                  <view class="content-info">
                    <text class="action">{{ item.action }}</text>
                    <text class="person">{{ item.person }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

    <!-- 底部按钮 -->
    <view class="footer-buttons" v-if="currentTab === 0">
      <button class="btn cancel-btn" @click="handleCancel">取消报修</button>
      <button class="btn edit-btn" @click="handleEdit">修改信息</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 标签页数据
const tabs = ref([
  { name: '基本信息' },
  { name: '维修详情' },
  { name: '维修员位置' },
  { name: '过程信息' }
])

const currentTab = ref(0)
const swiperHeight = ref(0)
const indicatorWidth = ref(40)

// 添加订单号参数
const orderNo = ref('')

// 添加页面加载事件
onLoad((option) => {
  if (option.orderNo) {
    orderNo.value = option.orderNo
    // 获取报修单详情
    getRepairDetail(option.orderNo)
  }
  
  // 如果有指定 tab，则切换到对应 tab
  if (option.tab) {
    currentTab.value = parseInt(option.tab)
    // 等待页面渲染完成后更新指示器宽度
    nextTick(() => {
      updateIndicatorWidth(currentTab.value)
    })
  }
})

// 添加获取详情的方法
const getRepairDetail = (orderNo) => {
  // 这里添加获取详情的接口调用
  // 暂时用模拟数据
  detail.value = {
    orderNo: orderNo,
    submitTime: '2024-10-10 09:00',
    station: '北京中石化后沙加油站',
    deviceName: '加油机-014/型号/品牌',
    faultPart: '加油枪不自封',
    urgencyLevel: '紧急',
    faultDesc: '95号汽油14号枪不自封',
    faultDate: '2024-10-10 9:00',
    reporter: '李四',
    reporterPhone: '13456789011',
    faultImages: ['/static/placeholder.png', '/static/placeholder.png', '/static/placeholder.png']
  }
}

// 模拟详情数据
const detail = ref({
  orderNo: 'ZSH1320001',
  submitTime: '2024-10-10 09:00',
  station: '北京中石化后沙加油站',
  deviceName: '加油机-014/型号/品牌',
  faultPart: '加油枪不自封',
  urgencyLevel: '紧急',
  faultDesc: '95号汽油14号枪不自封',
  faultDate: '2024-10-10 9:00',
  reporter: '李四',
  reporterPhone: '13456789011',
  faultImages: ['/static/placeholder.png', '/static/placeholder.png', '/static/placeholder.png']
})

// 计算 swiper 高度
onMounted(async () => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  
  // #ifdef H5
  // H5环境下的高度计算
  const windowHeight = systemInfo.windowHeight
  const navHeight = 44 // 导航栏高度
  const tabHeight = 40 // tab栏高度（px）
  const footerHeight = 60 // 底部按钮高度（px）
  
  swiperHeight.value = windowHeight - navHeight - tabHeight - footerHeight
  // #endif
  
  // #ifndef H5
  // 非H5环境下的高度计算
  const windowHeight = systemInfo.windowHeight
  const statusBarHeight = systemInfo.statusBarHeight
  const navHeight = 44 // 导航栏高度
  const tabHeight = uni.upx2px(80) // tab栏高度
  const footerHeight = uni.upx2px(120) // 底部按钮高度
  
  swiperHeight.value = windowHeight - statusBarHeight - navHeight - tabHeight - footerHeight
  // #endif
  
  await nextTick()
  updateIndicatorWidth(currentTab.value)
})

// 更新指示器宽度
const updateIndicatorWidth = (index) => {
  const query = uni.createSelectorQuery()
  query.select(`#tab-content-${index}`).boundingClientRect(data => {
    if (data) {
      indicatorWidth.value = data.width
    }
  }).exec()
}

// Tab切换相关方法
const switchTab = (index) => {
  if (currentTab.value === index) return
  currentTab.value = index
  updateIndicatorWidth(index)
}

const handleSwiperChange = (e) => {
  const index = e.detail.current
  currentTab.value = index
  updateIndicatorWidth(index)
}

// 底部按钮处理方法
const handleCancel = () => {
  console.log('取消报修')
}

const handleEdit = () => {
  console.log('修改信息')
}

// 在 script setup 中添加
const maintenanceImages = ref(['/static/placeholder.png', '/static/placeholder.png', '/static/placeholder.png'])
const rating = ref(4) // 服务评价星级
const markers = ref([
  {
    id: 1,
    latitude: 39.92,
    longitude: 116.46,
    iconPath: '/static/repair-person-marker.png',
    width: 32,
    height: 32
  }
])

// 添加打电话方法
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: '13456789011', // 维修员电话号码
    fail: (err) => {
      console.error('拨打电话失败', err)
    }
  })
}

// 在 script setup 中添加
const processTimeline = ref([
  {
    date: '2024-10-10',
    time: '09:45',
    action: '验收签字-服务完成',
    person: '验收人：李四'
  },
  {
    date: '2024-10-10',
    time: '09:30',
    action: '开始维修',
    person: '维修员：张伟'
  },
  {
    date: '2024-10-10',
    time: '09:02',
    action: '派单成功',
    person: '维修员：张伟'
  },
  {
    date: '2024-10-10',
    time: '09:00',
    action: '提单',
    person: '报修人：李四'
  }
])
</script>

<style>
.repair-detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F5F5F5;
}

/* 标签页样式 */
.tab-header {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  background: #FFFFFF;
  display: flex;
  width: 100%;
  height: 80rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.tab-content {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 28rpx;
}

.tab-item.active {
  color: #1890FF;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: v-bind(indicatorWidth + 'px');
  height: 4rpx;
  background: #1890FF;
  border-radius: 2rpx;
  transition: all 0.3s ease;
}

/* 基本信息样式 */
.basic-info {
  background: #FFFFFF;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 12rpx;
  padding-bottom: 140rpx;
}

.info-item {
  display: flex;
  margin-bottom: 30rpx;
  line-height: 40rpx;
}

.label {
  color: #666666;
  font-size: 28rpx;
  width: 180rpx;
  flex-shrink: 0;
}

.value {
  color: #333333;
  font-size: 28rpx;
  flex: 1;
}

.value.urgent {
  color: #FF4D4F;
  font-weight: bold;
}

/* 故障照片样式 */
.fault-images {
  margin-top: 30rpx;
}

.fault-images .label {
  display: block;
  margin-bottom: 20rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.image-item image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 修改随机背景色类 */
.bg-random-1 {
  background: #E6F7FF !important;
}

.bg-random-2 {
  background: #F6FFED !important;
}

.bg-random-3 {
  background: #FFF7E6 !important;
}

.bg-random-4 {
  background: #F9F0FF !important;
}

.bg-random-5 {
  background: #FFE6E6 !important;
}

/* 底部按钮样式 */
.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #FFFFFF;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.cancel-btn {
  background: #FFFFFF;
  color: #666666;
  border: 2rpx solid #DDDDDD;
}

.edit-btn {
  background: #1890FF;
  color: #FFFFFF;
}

/* Swiper相关样式 */
.swiper-content {
  position: relative;
  flex: 1;
  height: 0;
}

.scroll-content {
  height: 100% !important;
}

/* 添加维修详情相关样式 */
.maintenance-info {
  background: #FFFFFF;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 12rpx;
  padding-bottom: 20rpx;
}

/* 维修照片样式 */
.maintenance-images {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.maintenance-images .label {
  display: block;
  margin-bottom: 20rpx;
}

/* 费用明细样式 */
.cost-details {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.cost-list {
  background: #F8F8F8;
  border-radius: 8rpx;
  padding: 20rpx;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  font-size: 28rpx;
}

.cost-item.total {
  border-top: 2rpx solid #EEEEEE;
  margin-top: 10rpx;
  padding-top: 20rpx;
}

.cost-name {
  color: #666666;
}

.cost-value {
  color: #333333;
}

.total .cost-value {
  color: #1890FF;
  font-weight: bold;
}

/* 验收签字样式 */
.signature {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.signature-box {
  height: 200rpx;
  background: #F8F8F8;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signature-box image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 服务评价样式 */
.service-rating {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.rating-stars {
  display: flex;
  gap: 10rpx;
}

.star-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 调整基础样式 */
.info-item {
  display: flex;
  margin-bottom: 30rpx;
  line-height: 40rpx;
}

.label {
  color: #666666;
  font-size: 28rpx;
  width: 180rpx;
  flex-shrink: 0;
}

.value {
  color: #333333;
  font-size: 28rpx;
  flex: 1;
}

/* 添加维修员位置相关样式 */
.location-info {
  padding: 20rpx;
}

/* 地图容器样式 */
.map-container {
  position: relative;
  width: 100%;
  height: 600rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.map {
  width: 100%;
  height: 100%;
}

/* 预计到达时间样式 */
.eta-info {
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.eta-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.eta-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eta-text {
  font-size: 24rpx;
  color: #333333;
}

/* 维修员信息卡片样式 */
.repair-person-card {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.person-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  overflow: hidden;
  background: #F5F5F5;
}

.person-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.person-name {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.company-name {
  font-size: 24rpx;
  color: #666666;
}

.contact-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-btn image {
  width: 40rpx;
  height: 40rpx;
}

/* 添加过程信息相关样式 */
.process-info {
  padding: 20rpx;
}

/* 服务进度样式 */
.service-progress {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  opacity: 0.5;
}

.step-item.active {
  opacity: 1;
}

.step-icon {
  width: 60rpx;
  height: 60rpx;
}

.step-text {
  font-size: 24rpx;
  color: #333333;
}

.step-line {
  flex: 1;
  height: 2rpx;
  background: #E8E8E8;
  margin: 0 10rpx;
}

/* 维修过程时间线样式 */
.repair-process {
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 30rpx;
}

.timeline {
  margin-top: 20rpx;
}

.timeline-item {
  display: flex;
  padding: 20rpx 0;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 140rpx;
  top: 80rpx;
  bottom: 0;
  width: 2rpx;
  background: #E8E8E8;
}

.time-info {
  width: 140rpx;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.date {
  font-size: 24rpx;
  color: #999999;
}

.time {
  font-size: 24rpx;
  color: #666666;
}

.content-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  padding-left: 30rpx;
  position: relative;
}

.content-info::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #1890FF;
}

.action {
  font-size: 28rpx;
  color: #333333;
}

.person {
  font-size: 24rpx;
  color: #666666;
}

/* 添加星星图标容器样式 */
.star-icon-wrapper {
  width: 40rpx;
  height: 40rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 修改评分样式 */
.rating-stars {
  display: flex;
  gap: 10rpx;
}

/* 修改联系按钮样式，移除原有背景色 */
.contact-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 确保所有图片容器都有过渡效果 */
.image-item,
.signature-box,
.eta-avatar,
.person-avatar,
.star-icon-wrapper,
.contact-btn {
  transition: background-color 0.3s ease;
}

/* 确保内容区域可以滚动 */
.scroll-content {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 修复底部按钮遮挡内容的问题 */
.footer-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #FFFFFF;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 为底部内容添加间距，防止被按钮遮挡 */
.basic-info,
.maintenance-info,
.location-info,
.process-info {
  min-height: calc(100vh - 80rpx - 120rpx);
  padding: 20rpx;
  padding-bottom: 140rpx;
  box-sizing: border-box;
}

/* 确保 swiper-item 内容可以滚动 */
:deep(.uni-swiper-item) {
  height: 100%;
  overflow: auto;
}
</style> 